<template #default="{ row }">
  <el-card class="box-card1">
    <el-row>
      <el-col span="6" class="el-col1">
        <span class="manager">管理员</span>
        <el-input placeholder="请输入管理员名称"> </el-input>
      </el-col>
      <el-col span="6">
        <el-button type="primary">搜索/刷新</el-button>
        <!-- <el-button type="success">添加管理员</el-button> -->
        <addButton />
      </el-col>
    </el-row>
  </el-card>
  <el-card>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column align="center" type="index" label="序号" width="120" />
      <el-table-column
        align="center"
        prop="managerName"
        label="姓名"
        width="200"
      />
      <el-table-column
        align="center"
        prop="roleName"
        label="角色"
        width="200"
      />
      <el-table-column
        align="center"
        prop="username"
        label="管理员账号"
        width="200"
      />
      <el-table-column align="center" prop="open" label="开启/关闭" width="200">
        <template #default="{ row }">
          <el-switch prop="open" v-model="row.open"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tel" label="联系电话" width="200" />
      <el-table-column
        align="center"
        prop="schoolName"
        label="所属驾校"
        width="200"
      />
      <el-table-column align="center" label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleClick"
            >编辑</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(row.objectId)"
            size="small"
            >删除</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(row.objectId)"
            size="small"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { roleDelete } from "../../../api/role";
import { ElMessage } from "element-plus";
import addButton from "./add-button.vue";
import { usersGet } from "../../../api/user";
const handleClick = () => {
  console.log("click");
};
const handleDelete = (objectId: string) => {
  roleDelete(objectId);
  ElMessage({
    showClose: true,
    message: "删除成功",
    type: "success",
  });
};
const tableData = ref([]);
// roleGet().then((res) => {
//     tableData.value = res.data.results
//     console.log("tableData.value", res.data.results);
// })
usersGet().then((res) => {
  tableData.value = res.data.results;
  // console.log(tableData.value);
});
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}

.box-card1 {
  margin-top: 30px;
  /* width: 300px; */
  display: flex;
  justify-content: space-between;

  .el-input {
    width: 300px;
    outline: none;
    border: none;
  }

  .el-col1 {
    border: 1px solid #777;
    background: #fbfbfb;
    padding-left: 30px;
    box-sizing: border-box;

    .manager {
      margin-right: 30px;
      text-align: center;
    }
  }
}
</style>